<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习1</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <!--1.先进行页面布局，放置一个复选框，一个下拉列表框，两个文本框和一个展示结果的div-->
        <!--2.把每个表单元素的数据进行展示（最后成功完成要删除）-->
        <!--3.把下拉列表框和数据展示的div进行隐藏和显示的操作-->
        <!--4.获取文本框的数据，结合是否会员和会员等级来决定折扣，进行计算（提示，使用计算属性）-->
        <input type="checkbox" v-model="checkedValue" value="是否会员" @click="visible=!visible">是否会员{{checkedValue}}
        <h3 v-if="visible">
        <select v-model="singleSelect">
            <option value="砖石">砖石</option>
            <option value="黄金">黄金</option>
            <option value="白银">白银</option>
        </select>
    </h3><br>
        数量：<input type="text" v-model="s">{{s}} <br>
        单价<input type="text" v-model="d">{{d}} <br>
        尊敬的{{singleSelect}},你购买的数量是{{s}},单价是{{d}},折扣是{{dis}},总价是{{s*d}}
    </div>
    
</body>
</html>
<script>
    const appConn=Vue.createApp({
        data(){
            return{
                checkedValue:false,
                singleSelect:'顾客',
                s:'',
                d:''

            }
        },
        computed:{
            dis(){
                if(this.singleSelect=='顾客'){
                    return 1
                }else if(this.singleSelect=='砖石'){
                    return 0.5
                }else if(this.singleSelect=='黄金'){
                    return 0.65
                }else if(this.singleSelect=='白银'){
                    return 0.78
                }
            }
        }
    }).mount("#app")
</script>